iT邦幫忙

第 11 屆 iThome 鐵人賽
DAY 18
0
自我挑戰組

Android的學習歷程系列 第 18 篇

[Day 18]Android-在RecyclerView上使用ObjectAnimator(五)

11th鐵人賽
1156 瀏覽

  • 分享至 

  • xImage
    •  

今天要進到判斷的部分，，首先要新增一個儲存選擇位置的arraylist。

private ArrayList<Integer> selectPosStack;

記得要找個地方new出來，這邊有稍微整理一些沒使用到的東西，最後會再完整附上。

 MyRecyclerViewAdapter(Context context, String[] data, int[] selectStatus, int[] selectWork) {
        handler = new Handler();
        this.mInflater = LayoutInflater.from(context);
        this.mData = data;
        this.mSelectStatus = selectStatus;
        this.mSelectWork = selectWork;
        selectPosStack = new ArrayList<>();
    }

再來到判斷是否相同的地方，從產生陣列的地方開始說明大概會是下面這樣的步驟。

https://ithelp.ithome.com.tw/upload/images/20191004/20121080y9ys8v6vPB.png

這邊在生成亂數表的地方也可以判斷這個陣列有幾個位置能夠加入資料，這樣就可以減少需要宣告的arraylist。

https://ithelp.ithome.com.tw/upload/images/20191004/201210801pm7svfprA.png

原先生成亂數的部分：

 //產生亂數表元素
        int reItemSize = 2; //圖片重複數
        for (int i = 1; i <= 6; i++) {
            for (int j = 1; j <= reItemSize; j++) {
                randomList.add(String.valueOf(i));
            }
        }

        //產生隨機亂數表_data
        RandomSize = randomList.size();
        for (int i = 1; i <= RandomSize; i++) {
            r2 = random.nextInt(randomList.size());
            reList.add(String.valueOf(randomList.get(r2)));
            randomList.remove(r2);
}

其他方法：

 for (int i = 1; i <= 6; i++) {
            for (int j = 1; j <= 2; j++) {
                if (newRandomList.size()==0){
                    newRandomList.add(String.valueOf(i));
                }else {
                    int listSpace = random.nextInt(newRandomList.size());//0~size
                    newRandomList.add(listSpace,String.valueOf(i));
                }
                Log.e("list",""+ newRandomList);
            }
}

MainActivity：

public class MainActivity extends AppCompatActivity implements MyRecyclerViewAdapter.ItemClickListener{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ArrayList<String> newRandomList = new ArrayList<>();
        Random random = new Random();

        //新亂數表
        for (int i = 1; i <= 6; i++) {
            for (int j = 1; j <= 2; j++) {
                if (newRandomList.size()==0){
                    newRandomList.add(String.valueOf(i));
                }else {
                    int listSpace = random.nextInt(newRandomList.size());//0~size
                    newRandomList.add(listSpace,String.valueOf(i));
                }
                Log.e("list",""+ newRandomList);
            }
        }
        Object[] myList = newRandomList.toArray();
        String[] cardList = Arrays.copyOf(myList, myList.length, String[].class);

        //產生選擇狀態表_selectList
        int[] selectStatus = new int[newRandomList.size()];
        for (int i = 0; i <= newRandomList.size() - 1; i++) {
            selectStatus[i] = 1;
        }

        int[] selectWork = new int[newRandomList.size()];
        for (int i = 0; i <= newRandomList.size() - 1; i++) {
            selectWork[i] = 1;
        }

        //設置recyclerView
        RecyclerView recyclerView = findViewById(R.id.card_list);
        int numberOfColumns = 3;
        recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns));
        MyRecyclerViewAdapter adapter = new MyRecyclerViewAdapter(this, cardList, selectStatus, selectWork);
        adapter.setClickListener(this);
        recyclerView.setItemViewCacheSize(6 * newRandomList.size() - 15);
        recyclerView.setAdapter(adapter);
    }

    @Override
    public void onItemClick(View view, int position, int score) {

    }
}

下面回到recyclerView的部分，在選擇的地方將位置做暫存，還有另外三個arrayList用來儲存選擇圖示。

selectPosStack.add(pos);
selectViewStack.add(itemView);
selectFrontStack.add(mImageView);
selectBackStack.add(cardView);

判斷的部分大致上是這樣，使用上面的selectPosStack儲存點擊位置後，檢查第一、二次點擊位置的數值是否相同。

mData[selectPosStack.get(0)].equals(mData[selectPosStack.get(1)])

相同的話，先隱藏圖示後再一併刪除相同的資料。

selectViewStack.get(0).setVisibility(View.INVISIBLE);
selectViewStack.get(1).setVisibility(View.INVISIBLE);
selectPosStack.remove(0);
selectPosStack.remove(0);
selectViewStack.remove(0);
selectViewStack.remove(0);
selectFrontStack.remove(0);
selectFrontStack.remove(0);
selectBackStack.remove(0);
selectBackStack.remove(0);

不同的圖示。

//不同
                                ObjectAnimator firstItemBack = ObjectAnimator.ofFloat(selectViewStack.get(0), "rotationY", 180, 360);
                                ObjectAnimator secondItemBack = ObjectAnimator.ofFloat(selectViewStack.get(1), "rotationY", 180, 360);
                                mSelectStatus[selectPosStack.get(0)] *= -1;
                                mSelectStatus[selectPosStack.get(1)] *= -1;
                                mSelectWork[selectPosStack.get(0)] *= -1;
                                mSelectWork[selectPosStack.get(1)] *= -1;
                                firstItemBack.setDuration(750);
                                secondItemBack.setDuration(750);
                                firstItemBack.start();
                                secondItemBack.start();
                                handler.postDelayed(new Runnable() {
                                    @Override
                                    public void run() {
                                        selectFrontStack.get(0).setVisibility(View.INVISIBLE);
                                        selectFrontStack.get(1).setVisibility(View.INVISIBLE);
                                        selectBackStack.get(0).setVisibility(View.VISIBLE);
                                        selectBackStack.get(1).setVisibility(View.VISIBLE);
                                    }
                                }, 375);
                                handler.postDelayed(new Runnable() {
                                    @Override
                                    public void run() {
                                        mSelectWork[selectPosStack.get(0)] *= -1;
                                        mSelectWork[selectPosStack.get(1)] *= -1;
                                        selectPosStack.remove(0);
                                        selectPosStack.remove(0);
                                        selectViewStack.remove(0);
                                        selectViewStack.remove(0);
                                        selectFrontStack.remove(0);
                                        selectFrontStack.remove(0);
                                        selectBackStack.remove(0);
                                        selectBackStack.remove(0);
                                    }
                                }, 750);
                            }

MyRecyclerViewAdapter

public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.ViewHolder> {

    private String[] mData = new String[0];
    private LayoutInflater mInflater;
    private ItemClickListener mClickListener;
    private Integer[] imageResource = {R.drawable.red_card, R.drawable.orange_card, R.drawable.yellow_card,
            R.drawable.green_card, R.drawable.blue_card, R.drawable.indigo_card, R.drawable.purple_card};

    private Handler handler;
    private ArrayList<Integer> selectPosStack;
    private ArrayList<View> selectViewStack;
    private ArrayList<ImageView> selectFrontStack;
    private ArrayList<ImageView> selectBackStack;
    //選取狀態
    private int[] mSelectStatus;
    private int[] mSelectWork;

    MyRecyclerViewAdapter(Context context, String[] data, int[] selectStatus, int[] selectWork) {
        handler = new Handler();
        this.mInflater = LayoutInflater.from(context);
        this.mData = data;
        this.mSelectStatus = selectStatus;
        this.mSelectWork = selectWork;
        selectPosStack = new ArrayList<>();
        selectViewStack = new ArrayList<>();
        selectFrontStack = new ArrayList<>();
        selectBackStack = new ArrayList<>();
    }


    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = mInflater.inflate(R.layout.card_item, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(final ViewHolder holder, int position) {
        holder.mImageView.setImageResource(imageResource[Integer.parseInt(mData[position]) - 1]);

        //開頭動畫
        View seeView = holder.itemView;
        ObjectAnimator animatorBack = ObjectAnimator.ofFloat(seeView, "rotationY", 180, 360);
        holder.mImageView.setVisibility(View.VISIBLE);
        animatorBack.setDuration(1000);
        animatorBack.start();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                holder.mImageView.setVisibility(View.INVISIBLE);
            }
        }, 500);
    }

    @Override
    public int getItemCount() {
        return mData.length;
    }

    public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        ImageView mImageView;
        ImageView cardView;

        ViewHolder(View itemView) {
            super(itemView);
            mImageView = itemView.findViewById(R.id.photo_item);
            cardView = itemView.findViewById(R.id.photo_stroke);
            itemView.setOnClickListener(this);
        }

        //翻牌動畫
        ObjectAnimator animator = ObjectAnimator.ofFloat(itemView, "rotationY", 0, 180);
        ObjectAnimator animatorBack = ObjectAnimator.ofFloat(itemView, "rotationY", 180, 360);

        @Override
        public void onClick(View view) {
            int position = getAdapterPosition();
            selectCard(position, animator, animatorBack, mImageView, cardView, itemView);
        }
    }

    private void selectCard(final int pos, ObjectAnimator animator, ObjectAnimator animatorBack, final ImageView mImageView, final ImageView cardView, final View itemView) {
        if (mSelectWork[pos] == 1) {
            //切換選取狀態 -1選取 1未選取
            mSelectStatus[pos] *= -1;
            if (mSelectStatus[pos] == -1) {
                //正面動畫
                animator.setDuration(750);
                animator.start();

                //切換工作狀態 -1運行 1閒置
                mSelectWork[pos] *= -1;

                //顯示卡面，隱藏卡背
                handler.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        mImageView.setVisibility(View.VISIBLE);
                        cardView.setVisibility(View.INVISIBLE);
                    }
                }, 375);

                //翻牌結束動作
                handler.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        mSelectWork[pos] *= -1;
                        selectPosStack.add(pos);
                        selectViewStack.add(itemView);
                        selectFrontStack.add(mImageView);
                        selectBackStack.add(cardView);
                        //判斷是否選擇相同圖示
                        Log.e("selectList", "" + selectPosStack);
                        if (selectPosStack.size() >= 2) {
                            //相同
                            if (mData[selectPosStack.get(0)].equals(mData[selectPosStack.get(1)])) {
                                selectViewStack.get(0).setVisibility(View.INVISIBLE);
                                selectViewStack.get(1).setVisibility(View.INVISIBLE);
                                selectPosStack.remove(0);
                                selectPosStack.remove(0);
                                selectViewStack.remove(0);
                                selectViewStack.remove(0);
                                selectFrontStack.remove(0);
                                selectFrontStack.remove(0);
                                selectBackStack.remove(0);
                                selectBackStack.remove(0);
                            } else  {
                                //不同
                                ObjectAnimator firstItemBack = ObjectAnimator.ofFloat(selectViewStack.get(0), "rotationY", 180, 360);
                                ObjectAnimator secondItemBack = ObjectAnimator.ofFloat(selectViewStack.get(1), "rotationY", 180, 360);
                                mSelectStatus[selectPosStack.get(0)] *= -1;
                                mSelectStatus[selectPosStack.get(1)] *= -1;
                                mSelectWork[selectPosStack.get(0)] *= -1;
                                mSelectWork[selectPosStack.get(1)] *= -1;
                                firstItemBack.setDuration(750);
                                secondItemBack.setDuration(750);
                                firstItemBack.start();
                                secondItemBack.start();
                                handler.postDelayed(new Runnable() {
                                    @Override
                                    public void run() {
                                        selectFrontStack.get(0).setVisibility(View.INVISIBLE);
                                        selectFrontStack.get(1).setVisibility(View.INVISIBLE);
                                        selectBackStack.get(0).setVisibility(View.VISIBLE);
                                        selectBackStack.get(1).setVisibility(View.VISIBLE);
                                    }
                                }, 375);
                                handler.postDelayed(new Runnable() {
                                    @Override
                                    public void run() {
                                        mSelectWork[selectPosStack.get(0)] *= -1;
                                        mSelectWork[selectPosStack.get(1)] *= -1;
                                        selectPosStack.remove(0);
                                        selectPosStack.remove(0);
                                        selectViewStack.remove(0);
                                        selectViewStack.remove(0);
                                        selectFrontStack.remove(0);
                                        selectFrontStack.remove(0);
                                        selectBackStack.remove(0);
                                        selectBackStack.remove(0);
                                    }
                                }, 750);
                            }
                        }
                    }
                }, 750);

            } else {
                //覆蓋動畫
                animatorBack.setDuration(750);
                animatorBack.start();
                mSelectWork[pos] *= -1;

                //顯示卡背，隱藏卡面
                handler.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        mImageView.setVisibility(View.INVISIBLE);
                        cardView.setVisibility(View.VISIBLE);
                    }
                }, 375);

                //翻牌結束動作
                handler.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        mSelectWork[pos] *= -1;
                        if (selectPosStack.contains(pos)) {
                            for (int i = 0; i < selectPosStack.size(); i++) {
                                if (selectPosStack.get(i) == pos) {
                                    selectPosStack.remove(i);
                                    selectViewStack.remove(i);
                                    selectBackStack.remove(i);
                                    selectFrontStack.remove(i);
                                }
                            }
                        }
                        Log.e("selectList", "" + selectPosStack);
                    }
                }, 750);
            }
        }
    }


    void setClickListener(ItemClickListener itemClickListener) {
        this.mClickListener = itemClickListener;
    }

    public interface ItemClickListener {
        void onItemClick(View view, int position, int score);
    }
}

到這邊會發現在快速返回時會產生錯誤，明天要來說如何解決錯誤並正常蓋回牌。


上一篇
[Day 17]Android-在RecyclerView上使用ObjectAnimator(四)
下一篇
[Day 19]Android-在RecyclerView上使用ObjectAnimator(六)
系列文
Android的學習歷程 共 30 篇
  1. 26
    [Day 26]Android-onDraw的基本使用方法
  2. 27
    [Day 27]Android-使用onDraw繪製波形圖
  3. 28
    [Day 28]Android-DatePickerDialog的使用
  4. 29
    [Day 29]Android-TimePickerDialog的使用
  5. 30
    [Day 30]Android-NumberPicker與自訂dialog
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙